@model OrchardCore.Media.ViewModels.EditMediaFieldViewModel
@using OrchardCore.Media.Settings;
@using OrchardCore.ContentManagement.Metadata.Models

@{
    var settings = Model.PartFieldDefinition.GetSettings<MediaFieldSettings>();
    var mediaFieldId = Html.IdFor(m => m);
}

<partial name="Shared/MediaFieldEditResources.cshtml" />

<script at="Foot">
    initializeAttachedMediaField(
        document.getElementById('@mediaFieldId'),
        '@mediaFieldId-field-file-upload',
        '@Url.Action("Upload", "Admin", new { area = "OrchardCore.Media" })',
        '@Url.Action("GetMediaItem", "Admin", new { area = "OrchardCore.Media" })',
         @(settings.Multiple ? "true" : "false"),
        '@Model.TempUploadFolder');
</script>

<div class="mediafield-editor" id="@mediaFieldId" data-for="@Html.IdFor(m => m.Paths)">
    <div class="media-field">
        <div class="form-group">
            <label asp-for="Paths">@Model.PartFieldDefinition.DisplayName()</label>
            @if (!string.IsNullOrWhiteSpace(settings.Hint))
            {
                <span class="hint">@settings.Hint</span>
            }

            <input asp-for="Paths" type="hidden" class="paths" :value="paths" data-init="@Model.Paths" />

            <nav class="media-field-toolbar" v-cloak>
                <div class="btn-group">
                    <button type="button" class="btn btn-secondary btn-sm" :disabled="mediaItems.length < 1" v-on:click="smallThumbs = !smallThumbs">
                        <span v-show="!smallThumbs" title="@T["Small Thumbs"]"><i class="fa fa-compress"></i></span>
                        <span v-show="smallThumbs" title="@T["Large Thumbs"]"><i class="fa fa-expand"></i></span>
                    </button>
                    <label v-show="canAddMedia" class="btn btn-sm btn-secondary fileinput-button">
                        <input id="@mediaFieldId-field-file-upload" type="file" name="files" multiple="multiple">
                        <i class="fa fa-upload"></i>
                    </label>
                    <a href="javascript:;" v-on:click="removeSelected" class="btn btn-secondary btn-sm" v-bind:class="{ disabled : !selectedMedia }"><i class="fa fa-trash"></i></a>
                </div>
                <div class="selected-media-name">
                    <code class="text-right" v-if="selectedMedia">@T["{{{{ selectedMedia.name }}}} ({{{{ isNaN(fileSize)? 0 : fileSize }}}} KB)"]</code>
                </div>
            </nav>
        </div>
        <upload-list id-of-upload-input-field="@mediaFieldId"></upload-list>
        <div class="form-group">
            <media-field-thumbs-container :media-items="mediaItems"
                                          :thumb-size="thumbSize"
                                          :selected-media="selectedMedia">
            </media-field-thumbs-container>
        </div>
    </div>
</div>

<partial name="Shared/MediaFieldEditLocalization.cshtml" />
